// 饼图扇区间隙组件
import BasePieChartComponent from "./base-pie-chart.js";

class GappedPieChart extends BasePieChartComponent {
    constructor() {
        super();
    }

    // 重写默认配置，添加间隙相关属性
    getDefaultConfig() {
        const baseConfig = super.getDefaultConfig();
        return {
            ...baseConfig,
            seriesAttrs: [
                // 保留父类的series配置项
                ...baseConfig.seriesAttrs,
                // 新增padAngle配置（通常用于饼图/环形图的扇区间隙）
                ['pie-padangle_number', 5], // 默认值5，可根据需求调整
                ['series-itemstyle-borderradius_number', 10], // 默认值10，可根据需求调整
                ['series-radius_text', '["30%", "50%"]'] // 保持字符串格式，便于配置存储
            ],
            gapAttrs: [
                ['gap-width_number', 3],
                ['gap-color_colorpicker', '#ffffff'],
                ['gap-border-radius_number', 0]
            ]
        };
    }

    // 重写观察属性
    static get observedAttributes() {
        return [
            ...super.observedAttributes,
            'gap-width_number',
            'gap-color_colorpicker',
            'gap-border-radius_number'
        ];
    }

    // 重写生成系列配置，添加扇区间隙
    generateSeries(pieData, seriesConfig, pieConfig) {
        const baseSeries = super.generateSeries(pieData, seriesConfig, pieConfig);
        const { buildConfig } = window.attributeUtils;
        const gapConfig = buildConfig(this, this.getDefaultConfig().gapAttrs);
        let radius = ['40%', '70%']; // 保底默认数组
        try {
            // 解析配置中的字符串为数组（如"[\"40%\", \"70%\"]" → ["40%", "70%"]）
            if (seriesConfig.radius) {
                radius = JSON.parse(seriesConfig.radius);
                // 校验解析结果是否为数组
                if (!Array.isArray(radius)) {
                    throw new Error('解析结果不是数组');
                }
            }
        } catch (e) {
            console.warn('radius配置解析失败，使用默认数组:', e);
        }
        return [{
            ...baseSeries[0],
            padAngle: pieConfig.padangle,
            radius: radius,
            itemStyle: {
                borderRadius: seriesConfig.itemstyleBorderradius
            }
        }];
    }

    // 处理间隙属性变化
    handleAttributeChange(name, value, currentOptions) {
        super.handleAttributeChange(name, value, currentOptions);
        
        if (!currentOptions.series || currentOptions.series.length === 0) return;
        if (!currentOptions.series[0].itemStyle) {
            currentOptions.series[0].itemStyle = {};
        }

        switch(name) {
            case 'gap-width_number':
                currentOptions.series[0].itemStyle.borderWidth = parseInt(value);
                this.chart.setOption(currentOptions);
                break;
            case 'gap-color_colorpicker':
                currentOptions.series[0].itemStyle.borderColor = value;
                this.chart.setOption(currentOptions);
                break;
            case 'gap-border-radius_number':
                currentOptions.series[0].itemStyle.borderRadius = parseInt(value);
                this.chart.setOption(currentOptions);
                break;
        }
    }
}

customElements.define('gapped-pie-chart', GappedPieChart);
    